<template>
  <div class="mainos">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>历史排线</span>
          </div>
          <div class="main_crumbs_rt box"></div>
        </div>
        <div v-loading="mainLoading">
          <div class="middle_box">
            <div class="line_box">
              <ul>
                <li
                  v-for="(item, index) in info.line"
                  :key="index"
                  :class="[info.line_id == index ? 'line_selected' : '']"
                  @click="changeLine(index)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
            <div class="car_box">
              <div class="left">
                <div class="line_brief">
                  <p>线路简报：</p>
                  <p>
                    用户数量：
                    <em>{{ info.line_set_members }}</em>
                  </p>
                  <p>
                    订单数量：
                    <em>{{ info.line_set_orders }}</em>
                  </p>
                  <p>
                    总体积(㎡)：
                    <em>{{ info.line_set_volume }}</em>
                  </p>
                  <p>
                    总重量(t)：
                    <em>{{ info.line_set_weight }}</em>
                  </p>
                </div>
                <div class="carlist">
                  <h3>车辆：</h3>
                  <div class="carlist_left">
                    <el-button
                      v-for="(item, index) in info.cars"
                      :key="index"
                      :type="info.car_id == index ? 'primary' : ''"
                      @click="changeCar(index)"
                      >{{ item }}</el-button
                    >
                  </div>
                </div>
                <div class="car_brief">
                  <p>车辆简报：</p>
                  <p>
                    用户数量：
                    <em>{{ info.car_set_members }}</em>
                  </p>
                  <p>
                    订单数量：
                    <em>{{ info.car_set_orders }}</em>
                  </p>
                  <p>
                    总体积(㎡)：
                    <em>{{ info.car_set_volume }}</em>
                  </p>
                  <p>
                    总重量(t)：
                    <em>{{ info.car_set_weight }}</em>
                  </p>
                </div>
              </div>
              <div class="right">
                <!-- <p>1.以商品体积重量，车辆货箱容量载重， 权重设置为依据。</p>
                <p>2.系统自动计算出最优线路分配、车辆使用方案</p>
                <p>3.计算结果可干预，如拖动用户配送顺序、更新车辆等</p>
                <p>4.需手动确认系统计算的结果，最终生成当天配送方案</p> -->
              </div>
            </div>
          </div>
          <div class="main_table" style="min-height: 550px">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="info.list"
              element-loading-text="加载中"
              fit
              highlight-current-row
              row-key="uid"
            >
              <el-table-column
                label="用户名称"
                prop=""
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  {{ scope.row.member.nickname }}
                </template>
              </el-table-column>
              <el-table-column
                label="用户编码"
                prop="member_info.code"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="区域"
                prop="region.title"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="收货地址 "
                prop="address"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="订单数量"
                prop="order"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="体积 (㎡)"
                prop="volume"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="重量  (t)"
                prop="weight"
                :show-overflow-tooltip="true"
              />
            </el-table>
          </div>
          <div class="main_page boxdq">
            <div></div>
            <!-- 分页 -->
            <div class="main_page_r">
              <el-pagination
                :current-page="current.page"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                @size-change="changeLimit"
                @current-change="changePage"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { lineHistory_info } from "@/api/distribution/distributionLinePlan";
import rules from "@/rules/distribution/distributionLine";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";
import dateOption from "@/options/dateOption";
export default {
  data() {
    return {
      id: this.$route.params.id,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      listLoading: false,
      mainLoading: false,
      // 列表数据
      info: {
        car_id: null,
        cars: [],
        info: {},
        line: {},
        list: [],
      },
      form: {
        line_id: 0,
        car_id: 0,
      },
      // 弹窗
      lineVisible: false,
      uid: "",
      car_select: "",
      line_select: "",
      line_list: ["三号线"],
      car_list: ["ACHE"],
    };
  },
  methods: {
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.lineHistory_info();
    },
    changePage(page) {
      this.current.page = page;
      this.lineHistory_info();
    },
    //切换线路
    changeLine(id) {
      this.form.line_id = id;
      this.lineHistory_info();
    },
    // 切换车辆
    changeCar(id) {
      this.form.car_id = id;
      this.lineHistory_info();
    },
    lineHistory_info() {
      this.mainLoading = true;
      let data = Object.assign(
        apiUrl().name,
        this.form,
        this.current,
        { id: this.id }
      );
      lineHistory_info(data).then((res) => {
        if (res.errcode == 0) {
          this.info = res.data;
          this.mainLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
  created() {
    this.lineHistory_info();
  },
};
</script>

<style lang="scss" scoped>
.middle_box {
  width: 100%;
  margin-bottom: 25px;

  .line_box {
    width: 100%;
    border-bottom: 1px solid #e3e3e5;
    margin-top: 10px;
    ul {
      width: 100%;
      min-height: 26px;
      padding: 0 5px;
      display: flex;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;

      li {
        display: inline;
        font-size: 16px;
        color: #333333;
        margin-right: 25px;
        margin-bottom: 6px;
        cursor: pointer;
      }

      .line_selected {
        color: #03a98e;
        border-bottom: 2px solid #03a98e;
      }
    }
  }
}

.car_box {
  padding-top: 15px;
  display: flex;
  flex-direction: row;

  .left {
    flex: 7;
  }

  .right {
    flex: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    p {
      padding-left: 45px;
      line-height: 1.5;
      font-size: 14px;
      color: #5a5a5a;
    }
  }

  .car_brief,
  .line_brief {
    display: flex;
    align-items: center;

    p {
      display: inline;
      color: #181818;
      font-size: 14px;
      margin-right: 15px;

      em {
        color: #e47c02;
      }
    }
  }

  .carlist {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 10px 0;

    h3 {
      display: block;
      width: 50px !important;
      color: #333333;
      font-size: 16px;
      padding-top: 10px;
    }

    .carlist_left {
      flex: 1;

      .el-button {
        margin: 5px 15px 5px 0;
        min-width: 60px;
      }
    }
  }
}
</style>
